<template>
  <div class="videoBox center">
    <div class="card">
      <div class="cardTop title">study Case :</div>
      <div class="cardSize size">
        Bicycle accident case: The vehicle enters and exits the garage and is on a business due to
        improper
      </div>
      <div class="cardVideBox">
        <div
          class="cardBox"
          v-for="(item, index) in image"
          :key="index"
          @mouseover="mouseoverFn(index)"
        >
          <video class="cardVide">
            <source
              :src="$t(`messages.WarrantySerachData.videoList[${index}].video`)"
              type="video/mp4"
            />
          </video>
          <div
            class="palyButton aliCenter"
            @click="palyFn(`${$t(`messages.WarrantySerachData.videoList[${index}].video`)}`)"
            v-if="index <= 2 && item.type == 1"
          >
            <div class="size palySize">MORE</div>
            <div class="palyIcon center">
              <el-icon><CaretRight /></el-icon>
            </div>
          </div>
          <div
            class="palyButton aliCenter"
            @click="palyFn(`${$t(`messages.WarrantySerachData.videoList[${index}].video`)}`)"
            v-if="index > 2 && item.type == 1"
          >
            <div class="size palySize">MORE</div>
            <div class="palyIcon center">
              <el-icon><CaretRight /></el-icon>
            </div>
          </div>
        </div>
      </div>
    </div>
    <el-dialog v-model="dialogVisibleVideo" width="800" :before-close="handleClose">
      <div style="" :key="visivbUrlKey">
        <video class="videoDialog" controls loop>
          <source :src="visivbUrl" type="video/mp4" />
          <!-- <source src="../../../assets/video/22.mp4" type="video/mp4" /> -->
        </video>
      </div>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import Zh from '@/assets/i18n/langs/zh.js'
import En from '@/assets/i18n/langs/en.js'
import { WarrantySerachVideo } from '@/http/api/WarrantySerach.js'
let pageData = reactive({
  page: 1,
  size: 10
})
let image = ref({})
const getData = async () => {
  const res = await WarrantySerachVideo(pageData)
  image.value = res.res
  Zh.messages.WarrantySerachData.videoList = res.res.map((item) => {
    return {
      video: item.imageZh
    }
  })
  En.messages.WarrantySerachData.videoList = res.res.map((item) => {
    return {
      video: item.imageEn
    }
  })
}
let dialogVisibleVideo = ref(false)
let visivbUrlKey = ref(0)
let visivbUrl = ref('')
const palyFn = (data) => {
  dialogVisibleVideo.value = true
  visivbUrlKey.value++
  visivbUrl.value = data
}

const mouseoverFn = (data) => {
  image.value.forEach((item, index) => {
    if (index == data) {
      item.type = 1
    } else {
      item.type = 0
    }
  })
}
onMounted(() => {
  getData()
})
</script>

<style lang="scss" scoped>
.videoBox {
  height: 1375px;
  width: 100%;
  background: linear-gradient(to bottom, #020303 0%, #191e1f 100%);
}
.card {
  width: 1650px;
  height: 1000px;
}
.cardSize {
  color: white;
  width: 900px;
}
.cardVide {
  width: 450px;
  cursor: pointer;
}
.cardBox {
  height: 380px;
}
.cardVideBox {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  height: 450px;
  margin-top: 30px;
}
.palyButton {
  width: 450px;
  height: 90px;
  background: #ffdd00;
  display: flex;
  justify-content: space-between;
  padding: 10px;
  cursor: pointer;
}
.palySize {
  font-size: 25px;
  color: black;
  font-weight: bold;
}
.palyIcon {
  font-size: 25px;
  color: black;
}
.videoDialog {
  width: 100%;
  height: 100%;
}
::v-deep .el-dialog {
  padding: 0;
}
::v-deep .el-dialog__header {
  padding: 0;
}
</style>